<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="500"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Style settings
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2.5;
  ctx.font = 'bold 20px "Comic Sans MS", cursive, sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // --- Helper function to draw an arrow ---
  function drawArrow(fromX, fromY, toX, toY) {
    const headlen = 10; // length of head in pixels
    const dx = toX - fromX;
    const dy = toY - fromY;
    const angle = Math.atan2(dy, dx);
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
  }

  // --- Draw North Pole (N) ---
  ctx.beginPath();
  // Main body lines suggesting perspective
  ctx.moveTo(100, 190);
  ctx.lineTo(240, 170);
  ctx.moveTo(100, 240);
  ctx.lineTo(240, 220);
  // Inner face edge
  ctx.moveTo(240, 170);
  ctx.lineTo(240, 220);
  ctx.stroke();
  ctx.fillText("N", 215, 195);

  // --- Draw South Pole (S) ---
  ctx.beginPath();
  // Main body lines
  ctx.moveTo(500, 190);
  ctx.lineTo(360, 170);
  ctx.moveTo(500, 240);
  ctx.lineTo(360, 220);
  // Inner face edge
  ctx.moveTo(360, 170);
  ctx.lineTo(360, 220);
  ctx.stroke();
  ctx.fillText("S", 385, 195);

  // --- Draw the conductor (ladder/wire assembly) ---
  // Define the rails based on linear interpolation for perspective
  const railBack = { start: { x: 140, y: 165 }, end: { x: 360, y: 170 } };
  const railFront = { start: { x: 140, y: 215 }, end: { x: 360, y: 220 } };

  // Draw rails
  ctx.beginPath();
  ctx.moveTo(railBack.start.x, railBack.start.y);
  ctx.lineTo(railBack.end.x, railBack.end.y);
  ctx.moveTo(railFront.start.x, railFront.start.y);
  ctx.lineTo(railFront.end.x, railFront.end.y);
  ctx.stroke();

  // Draw rungs
  ctx.beginPath();
  const numRungs = 6;
  for (let i = 1; i <= numRungs; i++) {
      const x = 240 + (i-1) * 24; // Rungs are inside the magnet gap
      
      const t = (x - railBack.start.x) / (railBack.end.x - railBack.start.x);
      
      const yBack = railBack.start.y + t * (railBack.end.y - railBack.start.y);
      const yFront = railFront.start.y + t * (railFront.end.y - railFront.start.y);

      ctx.moveTo(x, yBack);
      ctx.lineTo(x, yFront);
  }
  ctx.stroke();

  // Draw the semi-circular connector
  ctx.beginPath();
  ctx.moveTo(railBack.start.x, railBack.start.y);
  ctx.quadraticCurveTo(100, 190, railFront.start.x, railFront.start.y);
  ctx.stroke();


  // --- Draw Coordinate System ---
  const origin = { x: 200, y: 350 };
  const axisLength = 50;
  
  // Z-axis (up)
  ctx.beginPath();
  drawArrow(origin.x, origin.y, origin.x, origin.y - axisLength);
  ctx.stroke();
  ctx.fillText("z", origin.x, origin.y - axisLength - 15);

  // Y-axis (perspective right)
  ctx.beginPath();
  drawArrow(origin.x, origin.y, origin.x + axisLength * 1.2, origin.y + axisLength * 0.5);
  ctx.stroke();
  ctx.fillText("y", origin.x + axisLength * 1.2 + 15, origin.y + axisLength * 0.5);

  // X-axis (perspective left)
  ctx.beginPath();
  drawArrow(origin.x, origin.y, origin.x - axisLength * 1.2, origin.y + axisLength * 0.5);
  ctx.stroke();
  ctx.fillText("x", origin.x - axisLength * 1.2 - 15, origin.y + axisLength * 0.5);


  // --- Draw Gravity Vector ---
  const g_start = { x: 420, y: 250 };
  const g_end = { x: 420, y: 290 };
  ctx.beginPath();
  drawArrow(g_start.x, g_start.y, g_end.x, g_end.y);
  ctx.stroke();
  ctx.fillText("g", g_end.x + 20, (g_start.y + g_end.y) / 2);

  // --- Draw Figure Caption ---
  ctx.font = '24px "Times New Roman"';
  ctx.fillText("Fig. 2.38", 300, 450);

</script>
</body>
</html>